<template>
  <div class="q-ma-md">
    <t-scroll-area
      :thumb-style="thumbStyle"
      :bar-style="barStyle"
      style="height: 200px"
      id="scroll-area-with-virtual-scroll-1"
    >
      <t-virtual-scroll
        scroll-target="#scroll-area-with-virtual-scroll-1 > .scroll"
        :items="heavyList"
        :virtual-scroll-item-size="32"
        separator
        v-slot="{ item, index }"
      >
        <t-item :key="index" dense>
          <t-item-section>
            <t-item-label> #{{ index }} - {{ item.label }} </t-item-label>
          </t-item-section>
        </t-item>
      </t-virtual-scroll>
    </t-scroll-area>
  </div>
</template>

<script>
  const maxSize = 10000;
  const heavyList = [];

  for (let i = 0; i < maxSize; i++) {
    heavyList.push({
      label: 'Option ' + (i + 1),
    });
  }

  export default {
    setup() {
      return {
        heavyList,

        thumbStyle: {
          right: '5px',
          borderRadius: '8px',
          backgroundColor: '#027be3',
          width: '8px',
          opacity: 0.75,
        },

        barStyle: {
          right: '2px',
          borderRadius: '14px',
          backgroundColor: '#027be3',
          width: '14px',
          opacity: 0.2,
          marginTop: '-3px',
          marginBottom: '-3px',
          paddingTop: '3px',
          paddingBottom: '3px',
        },
      };
    },
  };
</script>
